<%@page pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"
	scope="session" />
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<jsp:include page="/layout/_css.jsp"/>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.css">
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<!-- <table id="table"></table> -->
		<div class="row">
			<div class="col-sm-12">
				  <div class="ibox float-e-margins">
				  	 <div class="ibox-title">
				  	 	<h5>宴席列表</h5>
				  	 </div>
				  	 <div class="ibox-content">
				  	 	<table id="table"></table>
				  	 	 <div class="btn btn-primary" onclick='addyanxi()'>添加餐桌</div>
				  	 </div>
				  </div>
			</div>
		</div>
	</div>
	<div id="addzhuo" style="display: none;">
		<div class="wrapper wrapper-content animated fadeInRight">
			<div class="ibox-content">
				<form action="" method="get" class="form-horizontal">
					<div class="form-group">
						<label class="col-sm-2 control-label">餐桌名</label>

						<div class="col-sm-10">
							<input type="text" name="zhuo_ming" class="form-control" value="">
						</div>
					</div>


					<div class="hr-line-dashed"></div>
					<div class="form-group">
						<div class="col-sm-4 col-sm-offset-2">
							<input class="btn btn-primary" type="button" onclick="addcanzhuo()"
								value="添加"> <input class="btn btn-white" type="button"
								onclick="laclose()" value="取消">
						</div>
					</div>
				</form>
			</div>
		</div>

	</div>
</body>
<jsp:include page="/layout/_script.jsp"/>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.js"></script>
<script>
$('#table').bootstrapTable({
    url: '${ctx}/DinnerTableServlet/listAllTable',
    columns: [
    	 {
        field: 'tableId',
        title: '桌号',
        sortable:true
    }, {
        field: 'tableName',
        title: '桌名'
    }, {
        field: 'tableStatus',
        title: '状态',
        sortable:true,
        formatter:function(v1){
        	if(v1==0){
        		return '空闲';
        	}else{
        		return '已预订';
        	}
        }
    }, {
        field: 'orderDate',
        title: '预定时间'
    }, {
    	field: 'caozuo',
        title: '操作',
        formatter:function(v1,v2,v3){
        	/* console.log(v1);
        	console.log(v2);
        	console.log(v3); */
        	return ['<a class="like" href="javascript:void(0)" title="Like">',
                '<i class="btn btn-warning">退桌</i>',
                '</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
                '<a class="remove" href="javascript:void(0)" title="Remove">',
                '<i class="btn btn-danger">删除</i>',
                '</a>'].join('');
        },
        events:'caocuoEvents'
    }],
    pagination:true,
    pageSize:10,
    pageList:[5,10,20],
    /* search:true, */
    showRefresh:true,
    showColumns:true,
   /*  clickToSelect:true, */
    sidePagination:'server',
    rowStyle:function(v,index){
    	var classes = ['active', 'success', 'info', 'warning', 'danger'];
        
        return {}; 
    } 
});
  window.caocuoEvents = {
        'click .like': function (e, value, row) {
        	  $.ajax({
    				url : '${pageContext.request.contextPath }/DinnerTableServlet/tuizhuo',
    				type : 'post',
    				data :{"tableId":row.tableId},
    				success : function(r){
    				if(r){  
    					layer.msg("已退桌");
    					$('#table').bootstrapTable('refresh');
    			 	}else{
    			 		layer.msg("退桌失败");
    			 	}
    			} 
    			
    		});  
        },
         'click .remove': function (e, value, row) {
        	if(confirm('是否删除')){
        		 $.get('${ctx}/DinnerTableServlet/removeByIdJson',{'id':row['tableId']},function(r){
            		 if(r){
            			layer.msg('删除成功');
            			 $('#table').bootstrapTable('refresh');
            		 }else{
            			 layer.msg('删除失败');
            		 }
            	 });
        	}
        } 
    };

 
function addyanxi() {
	layer.open({
		type : 1,
		content : $('#addzhuo'),
		area : [ '800px', '300px' ],
		offset : '70px',
		title : '餐桌添加',
		fixed : true,
	});
}
function laclose() {
	layer.closeAll();
	$('#table').bootstrapTable('refresh');
}
function addcanzhuo() {
	$.ajax({
		url : '${ctx}/DinnerTableServlet/addTable',
		type : 'post',
		data : {
			"tableName" : $("[name=zhuo_ming]").val()
		},
		success : function(r) {
			if (r) {
				layer.closeAll();
				layer.msg("添加成功");
				time: 5000;
				$('#table').bootstrapTable('refresh');
			} else {
				layer.msg("添加失败");
			}
		}
	});
}
</script>
</html>